/**
* @desc: 右上角导航
* @author qiankui
* @date qiankui 2023-4-23 15:17:27
*/
<template>
    <div class="homePage">
        <!-- 顶部样式 -->
        <div class="topBox">
            <div class="topLeft">
                <img class="logo hdPic" v-if="language=='zh-CN'" src="../../assets/common/img/logo.png" alt="">
                <img class="logo hdPic" v-if="language=='en-US'" src="../../assets/common/img/logo_en.png" alt="">
                <!--发版本前，请解除index.html底部的脚本注释-->
                <span class="proName" title="2024-6-18 15:17:17">{{$t('System name')}}</span>
            </div>
            <div class="topRight">
                <ul class="iconList">
                    <li :class="{'active':routePath=='/dh'}" @click="toLink('/dh')">
                        <div>
                            <img class="iconImg hdPic" src="../../assets/common/img/icon/sy.png" alt="">
                            <p class="title">{{this.i18n.t('home page')}}</p>
                            <!--首页-->
                        </div>
                    </li>
                    <li v-if="userInfo.userType==0" :class="{'active':routePath=='/sbgl'}" @click="toLink('/sbgl')">
                        <div>
                            <img class="iconImg hdPic" src="../../assets/common/img/icon/sb.png" alt="">
                            <p class="title">{{this.i18n.t('device management')}}</p>
                            <!--设备管理-->
                        </div>
                    </li>
                    <li v-if="userInfo.userType<2" :class="{'active':routePath=='/rygl'}" @click="toLink('/rygl')">
                        <div>
                            <img class="iconImg hdPic" src="../../assets/common/img/icon/ry.png" alt="">
                            <p class="title">{{this.i18n.t('personnel management')}}</p>
                            <!--人员管理-->
                        </div>
                    </li>
                    <li :class="{'active':routePath=='/kqgl'}" @click="toLink('/kqgl')">
                        <div>
                            <img class="iconImg hdPic" src="../../assets/common/img/icon/kq.png" alt="">
                            <p class="title">{{this.i18n.t('data statistics')}}</p>
                            <!--数据统计-->
                        </div>
                    </li>
                    <li v-if="userInfo.userType==0" :class="{'active':routePath=='/zhgl'}" @click="toLink('/zhgl')">
                        <div>
                            <img class="iconImg hdPic" src="../../assets/common/img/icon/zh.png" alt="">
                            <p class="title">{{this.i18n.t('Account management')}}</p>
                            <!--账号管理-->
                        </div>
                    </li>
                    <li v-if="userInfo.userType==0" :class="{'active':routePath=='/xtpz'}" @click="toLink('/xtpz')">
                        <div>
                            <img class="iconImg hdPic" src="../../assets/common/img/icon/xt.png" alt="" style="width: auto;height: 32px">
                            <p class="title">{{this.i18n.t('system configuration')}}</p>
                            <!--系统配置-->
                        </div>
                    </li>
                    <li style="position: relative;" @mouseleave="dropdownMenuHide" @mouseenter="dropdownMenuShow" id="dropdownView">
                        <div class="userInfo">
                            <img class="iconImg tx hdPic" src="../../assets/common/img/icon/yh.png" alt="">
                            <p class="title">{{userInfo.username||''}}</p>
                        </div>
                        <ul class="dropdownMenu" :class="{'en':language=='en-US'}" ref="dropdownMenu">
                            <!--修改密码-->
                            <li class="menu__item" @click="changePassword">
                                <i class="el-icon-lock"></i>
                                <span :class="{'menu_label':language=='en-US'}">{{this.i18n.t('modify password')}}</span>
                            </li>
                            <!--配置管理-->
                            <li class="menu__item" @click="configManage">
                                <i class="el-icon-setting"></i>
                                <span :class="{'menu_label':language=='en-US'}">{{this.i18n.t('Config management')}}</span>
                            </li>
                            <!--消息通知-->
                            <li class="menu__item" @click="notifyFlag=true">
                                <i class="el-icon-chat-dot-round"></i>
                                <span :class="{'menu_label':language=='en-US'}">{{this.i18n.t('Notify')}}</span>
                            </li>
                            <!--退出系统-->
                            <li class="menu__item" @click="exitSystem">
                                <i class="el-icon-switch-button"></i>
                                <span :class="{'menu_label':language=='en-US'}">{{this.i18n.t('Exit system')}}</span>
                            </li>
                        </ul>
                    </li>
                    <li class="gj" v-if="false">
                        <div class="gjView">
                            <img class="gjIcon zxh" title="最小化（未实现）" src="../../assets/common/img/icon/zxh.png" alt="">
                            <img class="gjIcon zdh" title="最大化（未实现）" src="../../assets/common/img/icon/zdh.png" alt="">
                            <img class="gjIcon" title="关闭（未实现）" src="../../assets/common/img/icon/gb.png" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /顶部样式 -->
        <!-- 下方样式 -->
        <div class="contentBox" :class="{'hideMenu' : showMenu === 0}">
            <!-- 右侧具体内容 -->
            <div class="conRight">
                <br>
                <!-- /tab标签切换 -->
                <div class="tab-content">
                    <!-- 为路由加上缓存，加上最大缓存数max，超过最大缓存数最前缓存的页面会被优先清掉，避免删除页面后，页面过多的堆积在缓存栈里面 -->
                    <!-- <keep-alive :max='11'> -->
                    <router-view :key="$route.meta.randomKey" v-if="isRouterAlive"></router-view>
                    <!-- </keep-alive> -->
                </div>
            </div>
            <!-- /右侧具体内容 -->
        </div>
        <!-- /下方样式 -->
        <!-- 修改密码弹框 -->
        <editPass :editPassVisible.sync="editPassVisible" v-if="editPassVisible" @loginOut="loginOut"></editPass>
        <configManage :configManageFlag.sync="configManageFlag" v-if="configManageFlag"></configManage>
        <!--消息通知设置弹窗-->
        <notify :notifyFlag.sync="notifyFlag" v-if="notifyFlag"></notify>
    </div>
</template>
<script>
    import { logout,cachestroeGet,cachestroeRemove} from '@/api/login.js';
    import { checkLogin } from "@/assets/common/js/utils/checkLogin.js";
    import { getLocalUserInfo,removeLocalUserInfo } from "@/assets/common/js/global";
    // 点击切换皮肤方法,退出时清除缓存
    import { changeColor, clearStoreSession,getSessionStorageLanguage } from "@/assets/common/js/global";
    // 修改密码弹框
    import editPass from './editPassword.vue'
    // 配置管理弹框
    import configManage from './configManage.vue'
    // 消息通知设置弹窗
    import notify from './notify.vue'
    export default {
        components: {
            editPass,
            configManage,
            notify
        },
        data() {
            return {
                notifyFlag:false,
                userType:null,
                userInfo:{},
                routePath:'',
                jsltdialogVisible: false,
                isRouterAlive: true,
                // 渲染皮肤切换项
                checkskinArr: [{
                    title: "浅色"
                }, {
                    title: "深色"
                }],
                // 选中皮肤
                selectIndex: 1,
                // 根据左侧菜单栏的折叠收起，确定右侧content宽度
                conWidth: false,
                showMenuTimer: null,
                size: '4rem',
                direction: "rtl",
                showWhat: 'wdxx',
                mbData: {},
                showInput: false,
                sloganObj: {},
                wdbjObj: {},
                wdbjNum: 0,  //  未读报警数量
                wdxxNum: 0, //  未读消息数量
                wdxxList: [],
                bjnotify: {},
                detailFrom: {},
                xxdialogVisible: false,
                bjObj: {},
                bjFlag: false,
                bjData: {
                    sjlx: "",
                    tpUrl: []
                },
                bjxqItemData: {},
                gridData: [],
                editPassVisible: false,
                configManageFlag: false,
                language:""
            }
        },
        computed: {
            showMenu() {
                return this.$store.state.collapseWidth;
            },
            routerActiveDate() {
                return 0;
            },
        },
        // 使用watch监听vuex中数据的变化
        watch: {
            $route(to,from){
                this.routePath=to.path
            }
        },
        created() {
            this.language=getSessionStorageLanguage()
            this.userInfo=getLocalUserInfo()
        },
        mounted() {
            // this.W.$mywebSocketMessage("message-hint","测试")
            this.routePath=this.$route.path

            // var userTypeResult=await this.cachestroeGet("userType")
            // var userInfoResult=await this.cachestroeGet("userInfo")
            // this.userInfo=res.data
            // this.userType=userTypeResult.data
            // this.userInfo=userInfoResult.data
            // this.userInfo=getLocalUserInfo()
        },
        provide() {
            return {
                reload: this.reload
            }
        },
        methods: {
            // 获取缓存
            cachestroeGet(key){
                return cachestroeGet(key)
            },
            // 显示用户头像下拉菜单
            dropdownMenuShow(){
                this.$refs.dropdownMenu.style.display="block"
            },
            // 隐藏用户头像下拉菜单
            dropdownMenuHide(){
                this.$refs.dropdownMenu.style.display="none"
            },
            // 退出系统
            exitSystem(){
                // 确定要退出吗？
                this.W.$myConfirm('warning', this.i18n.t('Are you sure exit system?'))
                    .then(async () => {
                        this.loginOut();
                        this.dropdownMenuHide()
                    })
                    .catch(() => {
                    });

                // 关闭websocket
                // if(this.$globalWebSocket.ws.url){
                //     console.log('关闭websocket',this.$globalWebSocket.ws);
                //     this.$globalWebSocket.ws.close()
                // }

            },
            // 配置管理
            configManage(){
                this.configManageFlag=true
                // this.W.$tips('warning', '未实现');
                this.dropdownMenuHide()
            },
            // 更改密码
            changePassword(){
                this.editPassVisible=true
                this.dropdownMenuHide()
            },
            toLink(url){
              console.log('url',url);
              console.log('this.$router',this.$router);
              this.$router.replace(url);
            },
            /**
             * @description 退出登陆cmmm
             * @author hanzheng 2022-02-08 18:12:17
             **/
            loginOut() {
                localStorage.clear();
                sessionStorage.clear();
                this.editPassVisible=false;
                logout()
                removeLocalUserInfo()
                this.$router.replace('/login');
            }

        }
    }
</script>

<style scoped lang='scss'>
    ::v-deep .jsltdialogVisible {
        .el-dialog__body {
            padding: 0;
        }
    }
    .zhzsWrap {
        margin-left: 20px;
        cursor: pointer;
    }

    ::v-deep .pandabg1 {
        background-color: #3765d7;
        box-shadow: 0px 6px 26px 0px #3765d7;
        color: #fff;
    }
    ::v-deep .pandabg2 {
        background-color: #19355a;
        box-shadow: 0px 6px 26px 0px #19355a;
        color: #fff;
    }
    ::v-deep .drawer-wrap {
        .el-drawer__body {
            padding: 30px;
        }
    }

    .search-box {
        height: 60px;
    }
    ::v-deep .wdxx.drawer-wrap {
        .el-drawer__body {
            padding: 80px 30px 20px 30px;
        }
    }
    .head-img {
        img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }
    }
    .search-box {
        width: calc(100% - 1080px);
        position: fixed;
        top: 7px;
        left: 600px !important;
        z-index: 9999;
    }
    .icon-bell {
        position: relative;
        .bj-num {
            position: absolute;
            top: -4px;
            left: 14px;
            background-color: #f5242d;
            padding: 0 2px;
            height: 14px;
            min-width: 14px;
            line-height: 14px;
            text-align: center;
            font-size: 12px;
            border-radius: 9px;
            color: #fff;
        }
    }
    #dropdownView:hover .dropdownMenu{
        display: block;
    }
    .dropdownMenu{
        display: none;
        width: 100px;
        position: absolute;
        top:80px;
        /*left: 5px;*/
        z-index: 9999;
        background: #fff;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        /*border: 1px solid red;*/
        &.en{
            width:200px;
            right: -25px;
        }
        .menu__item{
            width: 100%;
            /*width: 150px;*/
            height: 38px;
            line-height: 38px;
            color: #606266;
            font-size: 14px;
            &:hover{
                background: #d5e5fd !important;
            }
            i{
                margin-right: 10px;
            }
            &.en{

            }
            .menu_label{
                display: inline-block;
                /*border: 1px solid red;*/
                width: 140px;
                text-align: left;
            }
        }
    }
</style>

<style>
    .customNotifyClass{
        /*z-index: 3000;*/
        -ms-word-break: break-all !important;
        word-break: break-all !important;
        z-index: 99999999999 !important;
    }
    .customNotifyClass .el-notification__content{
        margin: 0;
    }
    .el-upload-list__item {
        transition: none !important;
    }
    /* 禁止选择所有元素选中 */
    * {
        /* -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none; */
    }
    @media screen and (max-width: 1020px) {
        .logo{
            display: none;
        }
        .projectNamePic{
            margin-left:20px;
        }
    }
    /*!*表示浏览设备屏幕大于1000*!*/
    /*@media screen and (min-width:920px){*/
    /*.logo{*/
    /*display: inline-block;*/
    /*}*/
    /*}*/
</style>
